<template>
	<view class="list-box">
		<view class="title space-between center">
			<view class="center">
				<text class="name">{{name}}</text>
				<text class="word" v-if="word">{{word}}</text>
			</view>
			<view class="all">
				<!-- 注意传递的对象时，不要用引号把{}引起来 -->
				<text>全部></text>
				<text class="iconfont icon-right"></text>
			</view>
		</view>

		<!-- 插槽，列表部分 -->
		<slot></slot>
	</view>
</template>
<script>
	export default {
		props: {
			name: { // 名称
				type: String,
				default: '热门推荐'
			},
			word: { // 高亮单词，如： 'HOT'
				type: String,
				default: null
			}
		}
	}
</script>
<style lang="scss">
	/* 列表展示 */
	.list-box {
		margin-top: 60rpx;
		margin: 10px;
		width: 95%;

		// 标题
		.title {
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;

			.name {
				font-size: 38rpx;
				font-weight: 500;
				color: #303133;
				margin-right: 10rpx;
			}

			.word {
				/* 从左往右渐变 */
				background-image: linear-gradient(to right, #fb6531, #fa1710);
				font-size: 20rpx;
				color: #fff;
				padding: 0 10rpx;
				border-radius: 30rpx 30rpx 30rpx 0;
			}

			.all {
				font-weight: normal;
				color: #959da5;
				font-size: 28rpx;

				.iconfont {
					font-size: 25rpx;
				}
			}
		}
	}

	/* 左右页面切换 swiper*/
	.list-swiper {
		height: 800rpx;

		.swiper-item {
			// 每列的右边距
			padding-right: 20rpx;
		}
	}
</style>
